import BaseChart from '@/components/echarts/BaseChart';
import type { EChartsOption } from 'echarts';
import 'echarts-liquidfill';
import { useDayStore } from "@/stores/dayStore";
import type { DailyData } from '@/Interface/StoreInfoInterface';
import { fontSizeRem } from '@/utils/fontSizeRem';

const DailyRevenue = () => {

  const dayData: DailyData = useDayStore(state => state.dayData) as DailyData

  let information = {
    color: "#069DFD",
    area: ["营业额", "利润", "目标"],
    dataArray: [dayData?.revenue.amount, dayData?.profit, dayData?.revenue.target],
  };


  const options: EChartsOption = {
    title: {
      text: '财务指标',
      left: 'center',
      top: '5%',
      textStyle: {
        color: "#fff",
        fontSize: fontSizeRem(16)
      }
    },
    backgroundColor: "",
    tooltip: {
      trigger: "axis",
      backgroundColor: "rgba(9,40,84,0.8)",
      borderColor: "rgba(9,40,84,0.8)",
      textStyle: {
        color: "#fff",
        fontSize: fontSizeRem(16),
      },
      axisPointer: {
        type: "shadow",
      },
    },
    grid: {
      left: "5%",
      right: "5%",
      top: "20%",
      bottom: "-10%",
      containLabel: true,
    },
    xAxis: [
      {
        type: "value",
        show: false,
      },
    ],
    yAxis: [
      {
        type: "category",
        splitLine: {
          show: false,
        },
        axisLine: {
          show: false
        },
        axisTick: {
          show: false,
        },
        inverse: true,
        data: information.area,
        axisLabel: {
          color: "#fff",
          margin: 10,
          fontSize: fontSizeRem(16),
          rich: {
            id: {
              padding: [0, 0, 0, 2],
              color: '#fff',
            },
            nameStyle: {
              padding: [0, 10, 0, 2],
              color: '#fff',
            },
          },
        },
      },
      {
        inverse: true,
        axisTick: {
          show: false
        },
        axisLine: {
          show: false
        },
        axisLabel: {
          color: "#fff",
          fontSize: fontSizeRem(16),
          formatter: (value: number) => {
            return value + ' 元'; // 添加单位
          },
        },
        data: information.dataArray,
      },
    ],
    series: [
      {
        type: "bar",
        barWidth: 10, // 柱子宽度
        showBackground: true,
        backgroundStyle: {
          color: "rgb(10, 51, 126)",
          borderRadius: 5, //设置背景的圆角
        },
        data: information.dataArray.map((item) => {
          return {
            value: item,
            itemStyle: {
              borderRadius: 5,
              color: information.color,
            },
          };
        }),
      },
    ],
  };


  return (
    <>
      <div style={{ width: '100%', height: '18vh' }}>
        <BaseChart option={options} />
      </div>
    </>
  );
};

export default DailyRevenue;